<template>
  <div>
    <el-drawer
      v-if="visible"
      title="特价用户"
      class="preferentialUser"
      :visible.sync="visible"
      direction="rtl"
      :wrapper-closable="true"
      :append-to-body="true"
    >
      <div class="item">
        <el-tabs
          v-model="activeName"
          style="min-height: 200px;"
        >
          <el-tab-pane lazy label="权益信息" name="info">
            <div class="title">权益内容</div>
            <el-table :data="preferentialData" style="width: 100%; margin-bottom: 20px;" max-height="400">
              <el-table-column prop="gtName" label="商品分类" />
              <el-table-column prop="goodsName" label="商品名称" />
              <el-table-column prop="specName" label="规格型号" />
              <el-table-column prop="disType" label="调整类型">
                <template slot-scope="scope">
                  <span>{{ scope.row.disType && formatColumnMap(disTypeMap, 'value', scope.row.disType, 'desc') }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="disCount" label="调整数值" />
              <el-table-column prop="price1" label="挂牌价（元）" />
              <el-table-column prop="price2" label="优惠价（元）" />
              <el-table-column prop="disLimit" label="优惠上限" />
              <el-table-column prop="preferentialCount" label="剩余优惠数量" />
              <el-table-column prop="timeLimit" label="优惠时限">
                <template slot-scope="scope">
                  <span>{{ scope.row.timeLimit && formatColumnMap(timeLimitTypeMap, 'value', scope.row.timeLimit, 'desc') }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="title">优惠渠道</div>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="微信" disabled />
              <el-checkbox label="呼叫中心" disabled />
              <el-checkbox label="门店" disabled />
              <el-checkbox label="支付宝小程序" disabled />
              <el-checkbox label="话务下单" disabled />
            </el-checkbox-group>
          </el-tab-pane>
          <el-tab-pane lazy label="权益消费记录" name="record">
            <el-form :inline="true">
              <el-form-item label="下单时间:">
                <el-date-picker
                  v-model="transactTime"
                  type="date"
                  placeholder="选择日期"
                />
                <span>至</span>
                <el-date-picker
                  v-model="transactTimeEnd"
                  type="date"
                  placeholder="选择日期"
                />
              </el-form-item>
              <el-form-item label="处理人:">
                <el-select
                  v-model="ownerId"
                  :loading="$loadingPlugin.getOwnerList"
                  filterable
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in ownerList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  />
                </el-select>
                <!-- <el-input v-model.trim="ownerName" clearable /> -->
              </el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getData">查询</el-button>
            </el-form>
            <lb-table
              ref="lbTable"
              border
              highlight-current-row
              element-loading-text="加载中"
              :column="tableData.column"
              :data="tableData.data"
              height="60vh"
              pagination
              :total="tableData.total"
              @fetch="getData"
            />
            <order-detail
              ref="orderDetail"
              :payment-method-map="paymentMethodMap"
              :pay-status-map="payStatusMap"
              :transactor-list="transactorList"
              :order-flag-map="orderFlagMap"
              :order-source-map="orderSourceMap"
              :order-status-map="orderStatusMap"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { preferentialUserDetail, preferentialList, queryMap, queryTransactorList, queryOwnerList } from '@/api'
  import { parseTime, formatColumnMap } from '@/utils'
  import { fromPlatColMap } from '@/utils/map'
  import moment from 'dayjs'
  import { mapGetters } from 'vuex'
  // import { customerCustomerorder, queryMap, queryTransactorList } from '@/api'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import OrderDetail from '../../orderCenter/orderManage/components/OrderDetails.vue'
  export default {
    name: 'preferential-user',
    components: { OrderDetail },
    data() {
      return {
        parseTime,
        visible: false,
        activeName: 'info',
        preferentialData: [],
        checkList: [],
        transactTime: moment().subtract(3, 'M').startOf('M'),
        transactTimeEnd: '',
        ownerId: '',
        tableData: {
          column: [

            {
              label: '订单号',
              prop: 'orderCode',
              width: 100,
              render: (h, { row }) => (
              <el-link underline={false} onClick={() => this.openOrderDetail(row)}>
                {row.orderCode}
              </el-link>)
            },
            { label: '订单来源', prop: 'fromPlat', width: 100, align: 'center',
              render: (h, { row }) => <span>{ row.fromPlat && fromPlatColMap[row.fromPlat] }</span>
            },
            { label: '处理人', prop: 'ownerName', width: 100, align: 'center' },
            { label: '联系人', prop: 'contact', width: 100, align: 'center' },
            { label: '联系电话', prop: 'contactPhone', width: 120, align: 'center' },
            { label: '送气地址', prop: 'csmAddress', width: 250, align: 'left' },
            { label: '商品描述', prop: 'goodsDesc', width: 180 },
            { label: '商品数量', prop: 'goodsCount', width: 80, align: 'right' },
            { label: '下单时间', prop: 'transactTime', width: 160, align: 'center',
              render: (h, { row }) => <span>{ row.transactTime && parseTime(row.transactTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
            },
            {
              label: '实收金额',
              prop: 'taccReceivable',
              width: 80,
              align: 'center',
              render: (h, { row }) => (
                row.payStatus !== 1 && <span>{row.taccReceivable && row.taccReceivable.toFixed(2)}</span>
              )
            }
          ],
          data: []
        },
        disTypeMap: [],
        timeLimitTypeMap: [],
        paymentMethodMap: [],
        payStatusMap: [],
        transactorList: [],
        orderFlagMap: [],
        orderSourceMap: [],
        orderStatusMap: [],
        ownerList: []
      }
    },
    computed: {
      ...mapGetters(['corpSettingData'])
    },
    methods: {
      formatColumnMap,
      async open(temp) {
        return new Promise(async(resolve) => {
          if (temp) {
            this.visible = true
            this.resolve = resolve
            this.activeName = 'info'
            this.csmId = temp.csmId
            this.preferentialPackageId = temp.preferentialPackageId
            this.csmAddressId = temp.csmAddressId
            await this.getPreferentialData()
            this.getOwnerList()
            this.queryOptionsMap()
            this.getTransactorList()
          }
        })
      },
      async getPreferentialData() {
        this.checkList = []
        const params = {
          preferentialPackageId: this.preferentialPackageId,
          csmId: this.csmId,
          csmAddressId: this.csmAddressId
        }
        const res = await preferentialUserDetail(params)
        if (res.data) {
          if (res.data.disTypeMap) {
            this.disTypeMap = JSON.parse(res.data.disTypeMap)
          }
          if (res.data.preferentialPackageInfo) {
            console.log(JSON.parse(res.data.preferentialPackageInfo))
            this.preferentialPackageInfo = JSON.parse(res.data.preferentialPackageInfo)
            this.preferentialData = this.preferentialPackageInfo.detailInfoList
            if (this.preferentialData.length > 0) {
              this.preferentialData.forEach((item) => {
                item.disCount = item.disCount / 100
              })
            }
            if ((this.preferentialPackageInfo.platOptions & 1) > 0) {
              this.checkList.push('呼叫中心')
            }
            if ((this.preferentialPackageInfo.platOptions & 1 << 1) > 0) {
              this.checkList.push('微信')
            }
            if ((this.preferentialPackageInfo.platOptions & 1 << 3) > 0) {
              this.checkList.push('门店')
            }
            if ((this.preferentialPackageInfo.platOptions & 1 << 5) > 0) {
              this.checkList.push('支付宝小程序')
            }
            if ((this.preferentialPackageInfo.platOptions & 1 << 6) > 0) {
              this.checkList.push('话务下单')
            }
          }
          if (res.data.timeLimitTypeMap) {
            this.timeLimitTypeMap = JSON.parse(res.data.timeLimitTypeMap)
          }
        }
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res1, res2, res3, res4, res5, res6, res7] = await Promise.all([
          mergeAsyncFunc(queryMap, { enumName: 'OrderStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderFlag' }),
          mergeAsyncFunc(queryMap, { enumName: 'CustomerType' }),
          mergeAsyncFunc(queryMap, { enumName: 'PayStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' }),
          mergeAsyncFunc(queryMap, { enumName: 'ReStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderSource' })
        ])
        this.orderStatusMap = res1.data.filter((item) => item.value !== 6) // 订单类型(去掉‘已转派’)
        this.orderFlagMap = res2.data // 订单类型
        this.customerTypeMap = res3.data // 客户类型
        this.payStatusMap = res4.data // 支付状态
        this.paymentMethodMap = res5.data.filter(item => item.value === 1 || item.value === 2 || item.value === 16 || item.value === 128 || item.value === 256 || item.value === 2048) // 支付方式
        this.reStatusMap = res6.data // 回执状态
        this.orderSourceMap = res7.data // 订单来源
      },
      // 获取下单人列表
      async getTransactorList() {
        const res = await queryTransactorList({})
        this.transactorList = res.data
      },
      // 获取处理人列表
      async getOwnerList() {
        this.ownerId = ''
        const b = (this.corpSettingData.sp1 >> 2) & 0x01
        const orgId = -1
        const res = await queryOwnerList({
          orgId,
          corpparm1: b
        })
        this.ownerList = res.data
      },
      async getData({ currentPage = 1, pageSize = 20 }) {
        const params = {
          currentPage,
          pageSize,
          csmId: String(this.csmId),
          'orderStatus': 10,
          'transactDt': this.transactTime,
          'transactDtEnd': this.transactTimeEnd,
          'ownerId': this.ownerId,
          'preferentialPackageId': this.preferentialPackageId,
          'csmAddressId': this.csmAddressId
        }
        const res = await preferentialList(params)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 点击订单号
      async openOrderDetail(row) {
        await this.$refs.orderDetail.open(row, true)
      }
    }
  }
</script>

<style lang="scss" scoped>
.preferentialUser {
  /deep/.el-drawer {
    width: 75% !important;
  }
  /deep/.el-drawer__header {
    margin-bottom: 0;
  }
  .item {
    height: calc(100vh - 55px);
    padding: 20px;
    overflow-y: auto;
  }
  .title {
    margin-top: 10px;
    margin-bottom: 15px;
    color: #01999F;
  }
  /deep/.el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #01999F;
  }
  /deep/.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #01999F;
    border-color: #01999F;
  }
}
</style>
